<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<script src="js/jquery-3.5.1.min.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

		<title></title>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">书本列表</h3>
				</div>
				<div class="panel-body form-inline">
					<label>
						Id:
						<input type="text" class="form-control" v-model="id">
					</label>
					<label>
						名称:
						<input type="text" class="form-control" v-model="name" @keyup.enter="add">
					</label>
					<label>
						价格:
						<input type="text" class="form-control" v-model="price" @keyup.enter="add">
					</label>
					<label>
						出版日期:
						<input type="text" class="form-control" v-model="tdate" @keyup.enter="add">
					</label>
					<label>
						数量:
						<input type="text" class="form-control" v-model="count" @keyup.enter="add">
					</label>
					<input type="button" value="添加" class="btn btn-primary" @click="add">
					<label>
						输入搜索内容:
						<input type="text" class="form-control" v-model="keywords" v-focus v-color="'#bcdff7'">
					</label>
				</div>
			</div>
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>Id</th>
						<th>名称</th>
						<th>价格</th>
						<th>出版日期</th>
						<th>数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!--在search方法中通过执行for循环，把所有符合关键字的数据，保存到一个新数组中，返回-->
					<tr v-for="item in search(keywords)" :key="item.id">
						<td>{{item.id}}</td>
						<td v-text="item.name"></td>
						<td>{{item.price}}</td>
						<td><a>{{item.tdate}}</a></td>
						<td>
							<button type="button">-</button>
							{{item.count}}
							<button type="button">+</button>
						</td>
						<td><a href="#" @click.prevent="edit(item.id)">编辑</a>
							<a href="#" @click.prevent="del(item.id)">删除</a>
						</td>

					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				keywords: '',
				id: '',
				name: '',
				price: '',
				tdate: '',
				count: '',
				account: '',
				list: [{
						id: 1,
						name: 'Java从入门到放弃',
						price: 80,
						tdate: '2020-07-01',
						count: 1,
						account: "hehe"
					},
					{
						id: 2,
						name: 'Vue从入门到放弃',
						price: 90,
						tdate: '2020-07-02',
						count: 1,
						account: "haha"
					},
					{
						id: 3,
						name: 'Mysql从入门到放弃',
						price: 100.01,
						tdate: '2020-07-03',
						count: 1,
						account: "hehe"
					},
					{
						id: 4,
						name: '啥都从入门到放弃',
						price: 70.00,
						tdate: '2020-07-04',
						count: 1,
						account: "haha"
					},
				]
			},
			methods: {
				//添加功能
				add() {
					var car = {
						id: this.id,
						name: this.name,
						price: this.price,
						tdate: this.tdate,
						count: this.count
					}
					this.list.push(car)
					this.id = this.name = this.price = this.tdate = this.count = ''
				},
				//删除功能
				del(id) {
					this.list.some((item, i) => {
						if (item.id == id) {
							this.list.splice(i, 1)
							return true;
						}
					})
				},
				edit(index) {
					this.selected = index; // 修改的位置
					this.selectedlist = this.list[index];
					this.isActive = true;
				},
				//搜索方法
				search(keywords) {
					return this.list.filter(item => {
						if (item.name.includes(keywords)) {
							return item
						}
					})

				}

			}
		});
		Vue.config.devtools = true;
	</script>

</html>
